<template>
  <div>
    <!-- 顶部的面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 后台管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider content-position="left"></el-divider>

    <div class="tips">
      <h1>使用说明</h1>
      <p>后台管理首页通常用于显示一些汇总数据，例如：当前系统中共多少会员，多少文章、多少商品，及近期需要关注的数据走向，例如新增多少会员，成交多少订单等，你可以根据后端提供的接口显示相关数据，后端接口功能你可以查看：</p>
      <ul>
        <li><a :href="BASE_URL.BASIC + '/doc.html'" target="_blank">基础数据服务 {{BASE_URL.BASIC}}/doc.html</a></li>
        <li><a :href="BASE_URL.PASSPORT + '/doc.html'" target="_blank">单点登录服务 {{BASE_URL.PASSPORT}}/doc.html</a></li>
        <li><a :href="BASE_URL.ATTACHMENT + '/doc.html'" target="_blank">附件上传服务 {{BASE_URL.ATTACHMENT}}/doc.html</a></li>
        <li><a :href="BASE_URL.ADMIN_ACCOUNT + '/doc.html'" target="_blank">账号管理后台服务 {{BASE_URL.ADMIN_ACCOUNT}}/doc.html</a></li>
        <li><a :href="BASE_URL.ADMIN_CONTENT + '/doc.html'" target="_blank">资讯管理后台服务 {{BASE_URL.ADMIN_CONTENT}}/doc.html</a></li>
        <li><a :href="BASE_URL.ADMIN_MALL + '/doc.html'" target="_blank">商城管理后台服务 {{BASE_URL.ADMIN_MALL}}/doc.html</a></li>
        <li><a :href="BASE_URL.FRONT_ACCOUNT + '/doc.html'" target="_blank">账号管理前台服务 {{BASE_URL.FRONT_ACCOUNT}}/doc.html</a></li>
        <li><a :href="BASE_URL.FRONT_CONTENT + '/doc.html'" target="_blank">资讯管理前台服务 {{BASE_URL.FRONT_CONTENT}}/doc.html</a></li>
        <li><a :href="BASE_URL.FRONT_MALL + '/doc.html'" target="_blank">商城管理前台服务 {{BASE_URL.FRONT_MALL}}/doc.html</a></li>
      </ul>
      <p>注意：部分页面并没有实现与后端交互的效果，但后端功能均已完成，你可以自行补全页面中的交互功能。</p>
    </div>
  </div>
</template>

<script setup>
import BASE_URL from "@/http/BaseUrl";


</script>

<style scoped>
.tips h1 {
  font-size: 16px;
  font-weight: normal;
}

.tips p {
  font-size: 14px;
  color: #565656;
}

.tips ul {}

.tips ul li {
  font-size: 14px;
  color: #565656;
  margin: 10px 0;
}

.tips ul li a {
  text-decoration: none;
  color: #409EFF;
}

.tips ul li a:hover {
  text-decoration: underline;
  color: #409EFF;
}
</style>